<template>
  <van-field v-model.trim="internalValue"
             v-bind="$attrs"
             :label="label"
             :placeholder="placeholder"
             :type="type"
             @update:model-value="handleInput"
             class="custom-input">
    <template v-for="(_, name) in $slots"
              v-slot:[name]>
      <slot :name="name"></slot>
    </template>
  </van-field>
</template>  
  
<script setup name="I-Input">
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  type: {
    type: String,
    default: 'text'
  }
})
watch(
  () => props.modelValue,
  (value) => {
    handleInput(value)
  }
)
// eslint-disable-next-line no-undef
let internalValue = ref(props.modelValue)

function handleInput(value) {
  internalValue = value
  emit('update:modelValue', internalValue)
}
</script>  
  
<style scoped>
.custom-input {
  /* 自定义样式 */
}
</style>